<template>
  <el-select
    :ref="refName"
    v-model="value"
    placeholder="请选择"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    refName: {
      type: String,
      default: 'ref'
    },
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: '100px'
    }
  },
  methods: {
    initSelect() {
      const keyNode = this.$refs[this.refName].$el
      const node = keyNode.children[0].children[0]
      node.style.width = this.width
      const iNode = document.createElement('i')
      iNode.setAttribute('class', 'el-icon-caret-bottom')
      keyNode.appendChild(iNode)
      iNode.style.position = 'absolute'
      iNode.style.top = '4px'
      iNode.style.right = '8px'
      iNode.style.color = "#FFFFFF"
    }
  },
  mounted() {
    this.initSelect()
  },
}
</script>
<style lang='scss' scoped>
.el-select {
  height: 28px;

  &::v-deep .el-input {
    height: 28px;
  }

  &::v-deep .el-input__inner {
    height: 28px;
    background-color: #2087D0;
    color: #fff;
  }

  &::v-deep .el-input__suffix {
    display: none;
  }
}
</style>